<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写日记 - 暖言树洞</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-tree text-green-500 text-2xl"></i>
                <span class="text-xl font-bold text-green-600">暖言树洞</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="index.html" class="text-gray-700 hover:text-green-500 transition-colors">首页</a>
                <a href="diary.html" class="text-green-500 font-medium">心情日记</a>
                <a href="drift.html" class="text-gray-700 hover:text-green-500 transition-colors">漂流瓶</a>
                <a href="mall.html" class="text-gray-700 hover:text-green-500 transition-colors">公益商城</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-gray-700 hover:text-green-500 transition-colors">
                    <i class="fas fa-user-circle text-xl"></i>
                </a>
                <button class="md:hidden text-gray-700">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-24">
        <div class="max-w-3xl mx-auto">
            <div class="flex items-center justify-between mb-8">
                <h1 class="text-3xl font-bold text-gray-800">记录心情</h1>
                <div class="flex space-x-3">
                    <button id="saveDraft" class="btn-secondary px-4 py-2 text-sm">
                        <i class="fas fa-save mr-1"></i> 保存草稿
                    </button>
                    <button id="publishDiary" class="btn-primary px-6 py-2 text-sm">
                        <i class="fas fa-paper-plane mr-1"></i> 发布
                    </button>
                </div>
            </div>

            <!-- 日记编辑器 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <div class="mb-4">
                    <input type="text" placeholder="给你的心情起个标题吧..." class="form-input w-full text-xl font-medium border-0 focus:ring-0" />
                </div>
                <div class="mb-4">
                    <textarea placeholder="今天发生了什么？有什么想倾诉的呢..." rows="8" class="form-input w-full resize-none" ></textarea>
                </div>
                <div class="flex justify-between items-center">
                    <div class="flex space-x-4">
                        <button class="text-gray-500 hover:text-green-500 transition-colors p-2">
                            <i class="fas fa-image"></i>
                        </button>
                        <button class="text-gray-500 hover:text-green-500 transition-colors p-2">
                            <i class="fas fa-smile"></i>
                        </button>
                        <button class="text-gray-500 hover:text-green-500 transition-colors p-2">
                            <i class="fas fa-tag"></i>
                        </button>
                    </div>
                    <div class="text-sm text-gray-500">
                        <span id="wordCount">0</span> 字
                    </div>
                </div>
            </div>

            <!-- 隐私设置 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h2 class="text-xl font-semibold mb-4">隐私设置</h2>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium">允许日记漂流</h3>
                            <p class="text-sm text-gray-500">经过隐私计算后，你的日记将可能被其他用户捡到</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium">AI暖言回复</h3>
                            <p class="text-sm text-gray-500">发布后将收到AI暖言猫猫的暖心回复</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-medium">匿名发布</h3>
                            <p class="text-sm text-gray-500">隐藏你的个人信息</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" value="" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- AI暖言预览 -->
            <div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-6 border border-green-100">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-yellow-200 rounded-full flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fas fa-cat text-yellow-500 text-2xl floating"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold flex items-center mb-2">
                            <span>AI暖言猫猫</span>
                            <span class="badge badge-primary ml-2">AI</span>
                        </h3>
                        <p class="text-gray-700 mb-3">发布日记后，我会根据你的心情内容，为你送上温暖的回复哦~ 比如：</p>
                        <div class="bg-white rounded-lg p-4 shadow-sm italic text-gray-600">
                            "今天的你也很棒！即使遇到困难也没有放弃，这种坚持真的很了不起。生活就像天气，有晴有雨，但雨后总会有彩虹。记得给自己一个微笑，你值得被温柔对待~"
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 (移动端) -->
    <nav class="md:hidden fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200">
        <div class="flex justify-around py-3">
            <a href="index.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="diary.html" class="flex flex-col items-center text-green-500">
                <i class="fas fa-pen-to-square text-xl"></i>
                <span class="text-xs mt-1">日记</span>
            </a>
            <a href="drift.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-message text-xl"></i>
                <span class="text-xs mt-1">漂流瓶</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <script>
        // 简单的字数统计功能
        document.querySelector('textarea').addEventListener('input', function(e) {
            document.getElementById('wordCount').textContent = e.target.value.length;
        });

        // 发布按钮点击事件
        document.getElementById('publishDiary').addEventListener('click', function() {
            alert('日记发布成功！AI暖言猫猫正在为你准备暖心回复~');
            window.location.href = 'index.html';
        });

        // 保存草稿按钮点击事件
        document.getElementById('saveDraft').addEventListener('click', function() {
            alert('草稿保存成功！');
        });
    </script>
</body>
</html>